<template>
  <div class="params">
    <div class="line_box">
      <div class="wrapping">
        <media-select
          v-model="form.media"
          :size="formSize"
          multiple
          collapse-tags
        />
      </div>
      <div class="wrapping">
        <channel-select
          v-model="form.channels"
          :size="formSize"
          multiple
          collapse-tags
        />
      </div>
      <div class="wrapping">
        <el-input placeholder="城市" :size="formSize" v-model="form.city" />
      </div>
      <div class="wrapping">
        <el-input placeholder="姓名" :size="formSize" v-model="form.name" />
      </div>
      <div class="wrapping">
        <el-input placeholder="电话" :size="formSize" v-model="form.mobile" />
      </div>
      <div class="wrapping">
        <field-select :form.sync="form" />
      </div>
      <div class="wrapping">
        <follow-status v-model="form.progress"></follow-status>
      </div>
      <div class="wrapping">
        <label-select v-model="form.label"></label-select>
      </div>
    </div>
    <div class="line_box">
      <template v-if="showTeam">
        <div class="wrapping">
          <el-select
            v-model="form.shopId"
            :size="formSize"
            @change="shopSelectChange"
            filterable
            placeholder="门店"
          >
            <el-option
              v-for="item in shopOptionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="wrapping">
          <el-select
            v-model="form.teamId"
            :size="formSize"
            :loading="teamSelectLoading"
            @change="teamSelectChange"
            filterable
            placeholder="团队"
          >
            <el-option
              v-for="item in teamOptionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="wrapping">
          <el-select
            v-model="form.employeeId"
            :size="formSize"
            :loading="employeeSelectLoading"
            filterable
            placeholder="员工"
          >
            <el-option
              v-for="item in employeeOptionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </template>

      <div class="wrapping">
        <el-input
          placeholder="未跟进天数"
          :size="formSize"
          v-model="form.days"
        ></el-input>
      </div>
      <div class="wrapping" v-if="publicPool">
        <el-select
          v-model="form.publicPool"
          :size="formSize"
          placeholder="是否公共池客户"
        >
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </div>
      <div class="wrapping" v-if="remarkCount">
        <el-input
          placeholder="跟进次数"
          :size="formSize"
          v-model="form.remarkCount"
        ></el-input>
      </div>
      <div class="dateWrapping">
        <el-date-picker
          v-model="timeSlot"
          type="daterange"
          :size="formSize"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </div>
      <el-button-group>
        <el-button
          icon="el-icon-refresh"
          type="primary"
          :size="formSize"
          @click="resetForm"
          >重置查询条件</el-button
        >
        <el-button
          icon="el-icon-search"
          :size="formSize"
          type="primary"
          @click="search"
          >查询</el-button
        >
      </el-button-group>
    </div>
  </div>
</template>
  
<script>
import { mapState } from "vuex";
// import {
//   followUpOptions,
//   startOptions,
//   passOptions,
//   effectiveOptions,
// } from "./config";
import { GETCUSTOMERSTATUS } from "@/api/customer";
import { shopList, allTeamList, getEmployee } from '@/api/customer'
import LabelSelect from "@/components/labels";
import FollowStatus from "@/components/follow/status";
export default {
  name: "SearchParams",
  components: {
    LabelSelect,
    FollowStatus,
  },
  props: {
    publicPool: {
      type: Boolean,
      default: false,
    },
    remarkCount: {
      type: Boolean,
      default: false,
    },
    showTeam: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //   followUpOptions,
      //   startOptions,
      //   passOptions,
      //   effectiveOptions: effectiveOptions,
      timeSlot: "",
      form: {
        level: "",
        call: "",
        fit: "",
        progress: "",
        city: "",
        name: "",
        mobile: "",
        days:''
      },
      fieldList: [],
      formSize: "small",
      statusList: [],
      shopOptionList: [],
      teamOptionList: [],
      employeeOptionList: [],
      teamSelectLoading: false,
      employeeSelectLoading: false,
    };
  },

  async mounted() {
    this.search();
    this.fieldList = JSON.parse(JSON.stringify(this.fieldList1));
    console.log(this.showTeam)
    if (this.showTeam) {
      this.getShopList();
    }
    //this.getStatus();
  },
  computed: {
    ...mapState({
      fieldList1: (state) => state.myClient.fieldList,
    }),
  },
  watch: {
    fieldList1(val) {
      this.fieldList = JSON.parse(JSON.stringify(val));
    },
  },
  methods: {
    search() {
      console.log(this.form);
      const form = Object.assign({}, this.form);
      this.fieldList.forEach((element, index) => {
        form["field" + (index + 1)] = element.value1;
      });
      if (this.timeSlot) {
        form.startDate = this.timeSlot[0];
        form.endDate = this.timeSlot[1];
      }
      console.log(form);
      this.$emit("search", form);
    },
    resetForm() {
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          this.form[key] = "";
        }
      }
      this.timeSlot = "";
      this.fieldList.forEach((element) => {
        element.value1 = "";
      });
    },

    // 获取状态
    getStatus() {
      GETCUSTOMERSTATUS().then((res) => {
        this.statusList = res.data || [];
      });
    },

    // 设置参数
    setParams(id, value) {
      this.$set(this.form, id, value);
    },

    // 获取门店列表
    getShopList() {
      shopList().then((res) => {
        this.shopOptionList = res.data;
      });
    },

    async shopSelectChange() {
      this.teamSelectLoading = true;
      // this.teamId = "";
      // this.employeeId = "";
      if(this.form.teamId){
        delete this.form.teamId
      }
      if(this.form.employeeId){
        delete this.form.employeeId
      }
      try {
        await allTeamList({ shopId: this.form.shopId }).then((res) => {
          this.teamOptionList = res.data || [];
        });
        this.teamSelectLoading = false;
      } catch (error) {
        this.teamSelectLoading = false;
      }
    },
    async teamSelectChange() {
      this.employeeSelectLoading = true;
      //this.employeeId = "";
      if(this.form.employeeId){
        delete this.form.employeeId
      }
      try {
        await getEmployee({ shopId: this.form.shopId, teamId: this.form.teamId }).then(
          (res) => {
            this.employeeOptionList = res.data || [];
          }
        );
        this.employeeSelectLoading = false;
      } catch (error) {
        this.employeeSelectLoading = false;
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.params {
  padding-top: 10px;

  .wrapping {
    width: auto;
    // min-width: 200px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;

    ::v-deep .el-select {
      width: 160px;
    }

    ::v-deep .el-input {
      width: 160px;
    }
  }
}
</style>
  